<template>
	<view>
		<u-swiper @change="change" :height="300" :list="list" :title="title" :effect3d="effect3d"
			:indicator-pos="indicatorPos" :mode="mode" :interval="3000" @click="click"></u-swiper>
		<view style="background-color: #FFFFFF;border-radius: 20rpx ;">
			<view style="margin-top: 20rpx;padding: 20rpx;font-weight: 900;font-size: 32rpx;">置顶活动</view>
			<u-grid :col="col" @click="click" :border="true" style="margin-bottom: 20rpx;">
				<u-grid-item v-for="(item,index) in gridList" v-if="index<9" :index="index">
					<u-image shape="circle" ref="uImage" :width="80" :height="80" :src="item.image">
					</u-image>
					<view class="grid-text" style="
					padding: 0 20rpx;
					overflow: hidden;
					-webkit-line-clamp: 1;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;">{{item.title}}</view>
				</u-grid-item>
			</u-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
						title: '身无彩凤双飞翼，心有灵犀一点通'
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
						title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}, {
						image: "https://img2.baidu.com/it/u=2183941555,124415608&fm=26&fmt=auto&gp=0.jpg",
						title: '海贼'
					}
				],
				title: true,
				mode: 'round',
				indicatorPos: 'bottomCenter',
				effect3d: false,

				gridList:[],
				col: 3
			}
		},
		created() {
			uni.request({
				url: this.url.banner.getBanner + "/" + 5,
				method: 'GET',
				header: {},
				success: (res) => {
					var list = res.data.list;
					for (var i = 0; i < list.length; i++) {
						list[i].image = list[i].imageUrl
					}
					this.list = list
					console.log(this.list)
				},
				fail: (res) => {
					console.log(res)
				}
			});
			uni.request({
				url: this.url.top.getJiugongge,
				method: 'GET',
				header: {},
				success: (res) => {
					this.gridList = res.data.data;
					console.log(this.gridList)
				},
				fail: (res) => {
					console.log(res)
				}
			});
		},
		methods: {
			click(index) {
				console.log(index);
			},
			change(index) {
				// console.log(index);
			},
			click(index) {
				this.$refs.uToast.show({
					title: `点击了第${index + 1}宫格`,
					type: 'warning'
				})
			},
			// 针对单个grid-item的事件
			itemClick(index) {
				// console.log(index);
			}
		}
	}
</script>

<style>
</style>
